<template>
    <div>
        <div class="special">
            <img src="@/assets/imgs/numBig.jpg" alt="">
            <a href="https://d.musicapp.migu.cn/applink/"><span><img src="@/assets/imgs/icon_download.png" alt=""></span></a>
            <ul>
                <li>
                   <a href="">
                        <img src="@/assets/imgs/numSmall2.jpg" alt="">
                          </a>
                        <p class='special_name'>流星花园，音乐专辑</p>
                         <p class='singer_name'>群星</p>
                </li>

                <li>
                    <a href="">
                        <img src="@/assets/imgs/numSmall1.jpg" alt="">
                         </a>
                        <p class='special_name'>画外音</p>
                         <p class='singer_name'>王凯</p>
                  </li>
                <li>
                    <a href="">
                        <img src="@/assets/imgs/numSmall3.jpg" alt="">
                         </a>
                      <p class='special_name'>平凡的一天</p>
                        <p class='singer_name'>毛不易</p>
                  </li>
                <li>
                    <a href="">
                        <img src="@/assets/imgs/numSmall4.jpg" alt="">
                         </a>
                      <p class='special_name'>重命名</p>
                        <p class='singer_name'>周笔畅</p>
                  </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="scss" scoped>
.special{
    width: 100%;
    height: 12.06rem;
    position: relative;
    img{
        width: 100%;
        height: 100%;
    }
    span{
        display: block;
        width: 3rem;
        height: 0.72rem;
        position: absolute;
        right: .5rem;
        top:2rem; 
        img{
           width: 100%;
           height: 100%; 
        }
    }
    ul{
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-flow: row wrap;
        position: absolute;
        left: 0;
        top: 3.6rem;
        li{
            height: 3.6rem;
           
            a{
               width: 3.28rem;
               height: 2.7rem;
               display: block;
               margin-bottom: .1rem;
               background: url('../../assets/imgs/1342977.png') no-repeat;
               background-size: cover;
               box-sizing: border-box;
               overflow: hidden;
               img{
                width: 2.4rem;
                height: 2.4rem;
                 margin: .15rem .24rem ;
                }
            }
            .singer_name{
                    font-size: .24rem;
                    color: #999;
            }
            .special_name{
                    text-align: justify;
                    font-size: .28rem;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    word-wrap: break-word;
                    word-break: break-all;
            }
        }
    }
}
</style>
